<template>
  <div class="container">
    <!-- target=".page-component__scroll .el-scrollbar__wrap" :bottom="100" -->
    <el-backtop >
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
    <div class="main-container">
      <div class="center">
        <div class="nav">
          <div class="logo">
            <div class="centerlogo">
              <router-link to="/">
                <img src="../assets/logo_right.jpg" alt="" />
              </router-link>
            </div>
            <div class="centerlogo">
              <router-link to="/">
                <img src="../assets/logo_left.jpg" alt="" />
              </router-link>
            </div>
          </div>
          <div class="menu-left-top">
            <ul>
              <li><router-link to="/index_product">产品</router-link></li>
              <li><router-link to="/">行业</router-link></li>
              <li><router-link to="/">解决方案</router-link></li>
              <li><router-link to="/">为您推荐</router-link></li>
            </ul>
          </div>
          <div class="menu-right">
            <div>
              <router-link to="/">驱动程序</router-link>
              <router-link to="/">支持</router-link>
              <router-link to="/register ">
                欢迎:
                <img src="../assets/simg/user.jpg" />
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bo-contttomainer">
      <div class="center">
        <div class="nav-bottom">
          <h2>GeForce RTX 30 系列笔记本电脑</h2>
          <div class="nav-bottom_right">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <router-link to="/cart_index" class="nav-bottom_right_button">购物车</router-link>
          </div>
        </div>
      </div>
    </div>

    <div
      class="main"
      style="wdith: 1903px; height: 4967px; background-color: #000; top: 140px"
    >
      <img src="../../public/img/background_top.jpg" />
      <img src="../../public/img/background_bottom.jpg" />
      <div class="center_porduct" v-if="data">
        <div class="product_block">
          <div class="porduct_img">
            <img src="../../public/img/item_img1.jpg" alt="" />
          </div>
          <div class="porduct_wrap" v-if="data">
            <router-link
              v-for="{ pid, details, pic, price, href } in data.result"
              :key="pid"
              :to="href"
              class="text-de"
            >
              <div class="porduct_inner">
                <div class="porduct_pic">
                  <div class="porduct_conten">
                    <img :src="pic" />
                  </div>
                </div>
                <div class="porduct_inof">
                  <div class="porduct_title">
                    {{ details }}
                  </div>
                  <div class="porduct_price">￥{{ price }}</div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="porduct_img">
          <img src="../../public/img/item_img2.jpg" alt="" />
        </div>
        <div class="porduct_wrap" v-if="data2">
          <router-link
            v-for="{ pid, details, pic, price, href } in data2.result"
            :key="pid"
            :to="href"
            class="text-de"
          >
            <div class="porduct_inner">
              <div class="porduct_pic">
                <div class="porduct_conten">
                  <img :src="pic" />
                </div>
              </div>
              <div class="porduct_inof">
                <div class="porduct_title">
                  {{ details }}
                </div>
                <div class="porduct_price">￥{{ price }}</div>
              </div>
            </div>
          </router-link>
        </div>
        <div class="porduct_img">
          <img src="../../public/img/item_img3.jpg" alt="" />
        </div>
        <div class="porduct_wrap" v-if="data">
          <router-link
            v-for="{ pid, details, pic, price, href } in data.result"
            :key="pid"
            :to="href"
            class="text-de"
          >
            <div class="porduct_inner">
              <div class="porduct_pic">
                <div class="porduct_conten">
                  <img :src="pic" />
                </div>
              </div>
              <div class="porduct_inof">
                <div class="porduct_title">
                  {{ details }}
                </div>
                <div class="porduct_price">￥{{ price }}</div>
              </div>
            </div>
          </router-link>
        </div>
        <div class="porduct_img">
          <img src="../../public/img/item_img3.jpg" alt="" />
        </div>
        <div class="porduct_wrap" v-if="data">
          <router-link
            v-for="{ pid, details, pic, price, href } in data.result"
            :key="pid"
            :to="href"
            class="text-de"
          >
            <div class="porduct_inner">
              <div class="porduct_pic">
                <div class="porduct_conten">
                  <img :src="pic" />
                </div>
              </div>
              <div class="porduct_inof">
                <div class="porduct_title">
                  {{ details }}
                </div>
                <div class="porduct_price">￥{{ price }}</div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="container_footer">
        <img src="../../public/img/product_footer.png" alt="" />
      </div>
    </div>
    
  </div>
</template>

<script>
// let bc = document.getElementsByClassName("bo-contttomainer");
// let mc = document.getElementsByClassName("main-container");
// console.dir(mc);true
// window.onscroll = function scroll() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //scrollTop就是触发滚轮事件时滚轮的高度
    let scrollTop = document.documentElement.scrollTop;
  // console.log(scrollTop);
//   if(scrollTop>855){
//     bc[0].hidden=true
//     mc[0].hidden=true
//   }else{
//     bc[0].hidden=false
//     mc[0].hidden=false
//   }
// }

export default {
  data() {
    return {
      data: null,
      data2: null,
    };
  },
  mounted() {
    this.getData();
    this.getData2();
  },
  methods: {
    getData() {
      console.log(this);
      const url = "indexProduct1";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    getData2() {
      const url = "indexProduct2";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data2 = res.data;
      });
    },
  },
};
</script>

<style scoped src="../assets/css/mainNav.css"></style>
<style lang="scss" scoped>
.container{
  transition: 2s;
}

</style>
